<#include "/admin/utils/ui.ftl"/>
<@layout>

<link href="${base}/dist/vendors/treetable/css/jquery.treetable.css" rel="stylesheet" type="text/css"/>
<link href="${base}/dist/vendors/treetable/css/jquery.treetable.theme.default.css" rel="stylesheet" type="text/css"/>
<script src="${base}/dist/vendors/treetable/jquery.treetable.js"></script>

<#macro treeIterator nodes>
	<#-- 循环节点-->
    <#list nodes as row>
	    <tr data-tt-id="${row.id}" <#if (row.parentId??)>data-tt-parent-id="${row.parentId}"</#if>>
	        <td>${row_index + 1}</td>
	        <td>${row.name}</td>
	        <td>${row.key}</td>
	        <td><i class="${row.logo}"></i></td>
	        <td>${row.logo}</td>
	        <td><#if (row.status == 0)>显示<#else>隐藏</#if></td>
	        <td>${row.weight}</td>
	        <td <#if (row.parentId??)>style="padding-left: 84px;"</#if>>
	        	<#if (!row.parentId??)>
	        		<a href="view?parentId=${row.id}" class="btn btn-xs btn-primary">添加子栏目</a>
	            </#if>
	            <a href="javascript:void(0);" class="btn btn-xs btn-default" data-id="${row.id}" data-parent-id="${row.parentId}" data-action="weight">置顶</a>
	            <a href="view?id=${row.id}&parentId=${row.parentId}" class="btn btn-xs btn-success">修改</a>
	            <a href="javascript:void(0);" class="btn btn-xs btn-primary" data-id="${row.id}" data-action="delete">删除</a>
	        </td>
	    </tr>

    	<#-- 判断是否有子集 -->
        <#if row.list??>
            <@treeIterator nodes=row.list />
        </#if>
    </#list>
</#macro>

<section class="content-header">
    <h1>栏目管理</h1>
    <ol class="breadcrumb">
        <li><a href="${base}/admin">首页</a></li>
        <li class="active">栏目管理</li>
    </ol>
</section>
<section class="content container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">栏目列表</h3>
                    <div class="box-tools">
                        <a class="btn btn-default btn-sm" href="${base}/admin/channel/view">添加栏目</a>
                    </div>
                </div>
                <div class="box-body">
                    <div class="table-responsive">
                        <table id="dataGrid" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th width="50">#</th>
                                <th width="120">名称</th>
                                <th width="120">唯一标识</th>
                                <th width="40">展示</th>
                                <th width="180">LOGO</th>
                                <th width="120">状态</th>
                                <th width="100">权重（DESC）</th>
                                <th width="280">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                                <@treeIterator nodes=list />
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script type="text/javascript">
    var J = jQuery;

    function ajaxReload(json) {
        if (json.code >= 0) {
            if (json.message != null && json.message != '') {
                layer.msg(json.message, {icon: 1});
            }
            window.location.reload();
        } else {
            layer.msg(json.message, {icon: 2});
        }
    }

    function doUpdateWeight(id, parentId) {
        J.getJSON('${base}/admin/channel/weight', J.param({'id': id, 'parentId': parentId}, true), ajaxReload);
    }

    $(function () {
		$("#dataGrid").treetable({column:1, expandable: true});
		
        $('#dataGrid a[data-action="weight"]').bind('click', function(){
            var that = $(this);
            layer.confirm('确定将该项排序在第一位吗?', {
                btn: ['确定','取消'], //按钮
                shade: false //不显示遮罩
            }, function(){
                doUpdateWeight(that.attr('data-id'), that.attr('data-parent-id'));
            }, function(){
            });
            return false;
        });

        // 删除
        $('#dataGrid a[data-action="delete"]').bind('click', function () {
            var that = $(this);

            layer.confirm('确定删除此项吗?', {
                btn: ['确定', '取消'], //按钮
                shade: false //不显示遮罩
            }, function () {
                J.getJSON('${base}/admin/channel/delete', {id: that.attr('data-id')}, ajaxReload);
            }, function () {
            });
            return false;
        });

    })
</script>
</@layout>